<template>
  <div class="city_container">
    <head-top :head-title="cityName" go-back="true">
    <router-link to="/home" slot="changecity" class="change_city">切换城市</router-link>
    </head-top>
     <form class="city_form" v-on:submit.prevent>
      <div>
        <input type="search" name="city" placeholder="输入学校、商务楼、地址" class="city_input input_style" required v-model="inputValue">
      </div>
      <div>
        <input type="submit" name="submit" class="city_submit input_style" @click="postposi" value="提交">
      </div>
     </form>
     <header class="pois_search_history" v-if="historytitle">搜索历史</header>
     <ul class="getpois_ul">
        <li v-for="(item,index) in placelist" :key="index" @click="nextpage(index, item.geohash)">
             <h4 class="pois_name ellipsis">{{item.name}}</h4>
             <p class="pois_address ellipsis">{{item.address}}</p>
        </li>
      </ul>
      <!-- 判断是否触发点击搜索按钮获取搜索数据 -->
      <footer class="clear_all_history" v-if="historytitle&&placelist.length" @click="clearAll">
        清空所有
      </footer>
      <div class="search_neno_place" v-if="placeNone">
        很抱歉！无搜索结果
      </div>
  </div>
</template>

<script>
import headTop from '@/components/header/head.vue'
import { currentcity,searchplace } from '@/service/getData'
import { getStore, setStore, removeStore} from '@/config/mUtils'
export default {
   name: "CityPage",
   data () {
    return {
      inputValue: '', // 搜索地址
      cityId: '', // 当前城市的id
      cityName: '', // 当前城市的名字
      placeHistory: [], // 历史搜索记录
      placelist: [], // 搜索城市列表
      historytitle: true, // 默认显示搜索历史头部，点击搜索后隐藏
      placeNone: false, // 搜索无结果，显示提示信息
    }
   },
   components: {
    headTop
   },
   mounted() {
    this.cityId = this.$route.params.cityid
    currentcity(this.cityId).then(res => {
      this.cityName = res.name
    })
    // console.log(this.cityId)
    this.initData()
   },
   methods: {
    // 发送搜索信息inputValue
    postposi() {
      // 输入值不为空时才发送信息
        if(this.inputValue) {
          searchplace(this.cityId,this.inputValue).then(res => {
            this.historytitle = false,
            this.placelist = res, // 搜索城市列表赋值
            this.placeNone = res.length? false : true
          })
        }
    },
    // 获取搜索历史记录
    initData() {
        if(getStore('placeHistory')) {
          this.placelist = JSON.parse(getStore('placeHistory'))
        } else {
          this.placelist = []
        }
    },
    /**
     * 点击搜索结果进入下一页面时进行判断是否已经又一样的历史记录
     * 如果没有则新增，如果有则不做重复存储，判断完成后进入下一页
     */
     nextpage(index, geohash) {
        let history = getStore('placeHistory')
        let choosePlace = this.placelist[index]
        if(history) {
          let checkrepeat =false
          this.placeHistory = JSON.parse(history)
          this.placeHistory.forEach(item => {
            if(item.geohash == geohash) {
              checkrepeat = true
            }
          })
          if (!checkrepeat) {
            this.placeHistory.push(choosePlace)
          }
        } else {
          this.placeHistory.push(choosePlace)
        }
        setStore('placeHistory',this.placeHistory)
        this.$router.push({path: '/msite', query: {geohash}})
    },
    clearAll() {
      // 点击删除本次存储历史记录
      removeStore('placeHistory')
      this.initData()
    }
   }
}
</script>

<style scoped lang="scss">
   @import '@/style/mixin.scss';
   .city_container {
    padding-top: 2.35rem;
   }
   .change_city {
    right: 0.4rem;
    @include sc(0.6rem, #fff);
    @include ct;
   }
   .city_form {
    background-color: #fff;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-top: 0.4rem;
    div{
      width: 90%;
      margin: 0 auto;
      text-align: center;
      .input_style {
        border-radius: 0.1rem;
        margin-bottom: 0.4rem;
        @include wh(100%, 1.4rem);
      }
      .city_input {
        border: 1px solid $bc;
        padding: 0 0.3rem;
        @include sc(0.65rem, #333);
      }
      .city_submit {
        background-color: $blue;
        @include sc(0.65rem, #fff);
      }
    }
   }
  // 搜索历史以及搜索结果样式
   .pois_search_history {
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-left: 0.5rem;
    @include font(0.475rem, 0.8rem)
   }
   .getpois_ul {
    background-color: #fff;
    border-top: 1px solid $bc;
    li {
      margin: 0 auto;
      padding-top: 0.65rem;
      border-bottom: 1px solid $bc;
      .pois_name {
        margin: 0 auto 0.35rem;
        width: 90%;
        @include sc(0.65rem, #333)
      }
      .pois_address {
        width: 90%;
        margin: 0 auto 0.55rem;
        @include sc(0.45rem, #999)
      }
    }
   }
   .clear_all_history {
    @include sc(0.7rem, #666);
    text-align: center;
    line-height: 2rem;
    background-color: #fff;
   }
   .search_neno_place {
    margin: 0 auto;
    @include font(0.65rem, 1.75rem);
    color: #333;
    background-color: #fff;
    text-indent: 0.5rem;
   }
</style>